<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二级', '大强']
    var yDataArr1 = [99, 45, 32, 88, 87, 85, 90, 55]
    var yDataArr2 = [49, 55, 64, 81, 80, 66, 40, 59]
    var option = {
      title: {
        text: '成绩展示',
        textStyle: {
          color: 'red'
        },
        borderWidth: 5,
        borderColor: 'blue',
        borderRadius: 5,
        left: 50,
        top: 10
      },
      tooltip: {
        // trigger: 'item'
        trigger: 'axis',
        triggerOn: 'click',
        // formatter: '{b} 的成绩是 {c}'
        formatter: function(arg) {
          return arg[0].name + '的分数是：' + arg[0].data
        }
      },
      toolbox: {
        feature: {
          saveAsImage: {}, // 导出图片
          dataView: {}, // 数据视图
          restore: {}, // 重置
          dataZoom: {}, // 区域缩放
          magicType: {
            type: ['bar', 'line']
          }, // 动态图表类型切换
        }
      },
      legend: {
        data: ['语文', '数学']
      },
      xAxis: {
        type: 'category', // 类目轴
        data: xDataArr
      },
      yAxis: {
        type: 'value' // 数值轴
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: yDataArr1
        },
        {
          name: '数学',
          type: 'bar',
          data: yDataArr2
        },
      ]
    }
    // 步骤5：将配置项设置给 echarts 实例对象
    mCharts.setOption(option)
  </script>
</body>
</html>